<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/includeTaglib.jsp" %>

<style type="text/css">


.ztree li span.demoIcon{padding:0 2px 0 10px;}
.ztree li span.button.icon01{margin:0; background: url(<c:url value ='/css/zTreeStyle/img/diy/9.png'/>) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}

.ui-dialog-title{
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none
}
</style>

<SCRIPT type="text/javascript">
		<!--
		var setting = {
			edit: {
				drag: {
					autoExpandTrigger: true,
					prev: dropPrev,
					inner: dropInner,
					next: dropNext
				},
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeDragOpen: beforeDragOpen,
				onDrag: onDrag,
				onDrop: onDrop,
				onExpand: onExpand
			},
			view:{
				addDiyDom:addDiyDom,
				fontCss: function (treeId, node) {
					return node.font ? node.font : {};
				}
			}
		};
		
		var newTreeSetting = {
				data: {
					simpleData: {
						enable: true
					}
				}
		};
		
		//双击选择子机构员工
		function dblClickCallBack(e, treeId, treeNode){
			if(!treeNode.isParent && !treeNode.isEmploy){
				var icon=treeNode.icon;
				treeNode.icon = "<c:url value='/css/zTreeStyle/img/loading.gif' />";
				$.fn.zTree.getZTreeObj(treeId).updateNode(treeNode);
				$.getJSON('<c:url value='/json/findAllChildEmployeesBy.html?orgCode=' />'+treeNode.id, function(jsonData){
					if(jsonData.length>0){
						var zTree = $.fn.zTree.getZTreeObj(treeId);
						for(var i=0;i<jsonData.length;i++){
							jsonData[i].isEmploy=true;
							jsonData[i].checked=false;
						}
						zTree.addNodes(treeNode, jsonData);
					}else{
						alert('未找到相关数据');
					}
					treeNode.icon = icon;
					
					var rightTree=$.fn.zTree.getZTreeObj(treeId);
					rightTree.updateNode(treeNode);
					
					var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
					var nodes = treeObj.transformToArray(treeObj.getNodes());
					for(var j=0;j<nodes.length;j++){
						var node = rightTree.getNodeByParam("id",nodes[j].id, null);
						rightTree.checkNode(node, true, true);
					}
				});
			}
		}
		
		var addSetting = {
				check: {
					enable: true,
					chkboxType : { "Y" : "", "N" : "" }
				},
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					beforeCheck:function(treeId, treeNode) {
						if(rootNode.id==treeNode.id){
							alert('项目负责人不可删除');
							return false;
						}
					    return true;
					},
					
					onDblClick: dblClickCallBack,
					//勾选添加至左边树
					onCheck:function(event, treeId, treeNode){
						if(treeNode.isEmploy){
							var zTree = $.fn.zTree.getZTreeObj('treeDemo');
							var rootNode=zTree.getNodesByFilter(function filter(node) {
																	if(node.parentTId==null){
																		return true;
																	}
														        }, true);
							
							if(treeNode.checked){//勾中
								var nodeData={id:treeNode.id,pId:rootNode.id,name:treeNode.name,realName:treeNode.name};
								zTree.addNodes(rootNode, 
											   nodeData);
							}else{
								zTree.removeNode(zTree.getNodeByParam("id",treeNode.id, null));
							}
						}
					}
				}
			};
		
		
		
		
		var addSetting2 = {
				check: {
					enable: true,
					chkboxType : { "Y" : "", "N" : "" }
				},
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onDblClick:dblClickCallBack,
					//勾选添加至左边树
					onCheck:function(event, treeId, treeNode){
						if(treeNode.isEmploy){
							if(treeNode.checked){//勾中
								$('#multiSel').append($('<option id="sel_'+treeNode.id+'">'+treeNode.name+'</option>'));
							}else{
								$('#sel_'+treeNode.id).remove();
							}
						}
					}
				}
			};
		
		
		
		//机构节点没有勾选
		function orgJsonHandler(jsonData){
			for(var i=0;i<jsonData.length;i++){
				jsonData[i].nocheck=true;
			}
			return jsonData;
		}
		
		var IDMark_Switch = "_switch",
		IDMark_Icon = "_ico",
		IDMark_Span = "_span",
		IDMark_Input = "_input",
		IDMark_Check = "_check",
		IDMark_Edit = "_edit",
		IDMark_Remove = "_remove",
		IDMark_Ul = "_ul",
		IDMark_A = "_a";
		
		//添加树按钮
		function addDiyDom(treeId, treeNode) {
			if(treeNode.getParentNode()==null){
				return;
			}
			var aObj = $("#" + treeNode.tId + IDMark_A);
			var editStr = "<span class='demoIcon' id='diyBtn_" +treeNode.id+ "' title='"+treeNode.name+"' onfocus='this.blur();'><span class='button icon01'></span></span>";
			aObj.append(editStr);
			var btn = $("#diyBtn_"+treeNode.id);
			if (btn) btn.bind("click", function(){
				
				var editForm=$("#dialog-form").clone(true);
				editForm.attr("title",treeNode.name)
				editForm.find('#formBtn').attr('treeNodeId',treeNode.id);
				editForm.find('#titleWithinTheProject_').val(treeNode.titleWithinTheProject);
				editForm.find('#titleWithinTheProject_').attr('id','titleWithinTheProject_'+treeNode.id);
				editForm.find('#rankType').val(treeNode.rankType)
				
				editForm.find('#formBtn').bind("click",function(){
					var titleWithinTheProject=$('#titleWithinTheProject_'+treeNode.id).val();
					treeNode.titleWithinTheProject=titleWithinTheProject;
					
					if(titleWithinTheProject!=""){
						treeNode.name=treeNode.realName+"-"+titleWithinTheProject;
					}else{
						treeNode.name=treeNode.realName;
					}
					
					
					
					if(editForm.find('#rankType').val()=='LEVEL_MANAGEMENT'){
						treeNode.font={'color':'red'};
					}else{
						treeNode.font={'color':'black'};
					}		
					treeNode.rankType=editForm.find('#rankType').val();
					
					$.fn.zTree.getZTreeObj(treeId).updateNode(treeNode);
					editForm.remove();
				});
				
				editForm.dialog({
					modal: true,
					close: function(event,ui) {
						$(this).remove();
					}
				});
				
			});
		}
		
		
		function dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropNext(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}

		var log, className = "dark", curDragNodes, autoExpandNode;
		function beforeDrag(treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
					curDragNodes = null;
					return false;
				}
			}
			curDragNodes = treeNodes;
			return true;
		}
		function beforeDragOpen(treeId, treeNode) {
			autoExpandNode = treeNode;
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			if(targetNode==null || targetNode.getParentNode()==null){
				return false;
			}
			return true;
		}
		function onDrag(event, treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
		}
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
		}
		function onExpand(event, treeId, treeNode) {
			if (treeNode === autoExpandNode) {
				className = (className === "dark" ? "":"dark");
			}
		}
		function setTrigger() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		}
		
		function onTreeSubmit(){
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.transformToArray(treeObj.getNodes());
			
			
			var jsonData=new Array();
			
			for(var i=0;i<nodes.length;i++){
				var emp={"id" : nodes[i].id,
						 "empId" : nodes[i].id,
						 "empName" : nodes[i].realName,
						 "titleWithinTheProject" : nodes[i].titleWithinTheProject,
						 "rankType" : nodes[i].rankType,
						 "parentId" : nodes[i].pId}
				
				//alert(debug(emp));
				jsonData.push(emp);
				
			}
			
			var jsonStr=JSON.stringify(jsonData);
			
			//alert(jsonStr);
			$('#jsonData').val(jsonStr);
			$('#orgForm').submit();
		}
		
		//构建树入口
		var zNodes =${treeData};
		for(var i=0;i<zNodes.length;i++){
			zNodes[i].open=true;	
			if(zNodes[i].rankType=='LEVEL_EXECUTION'){
				zNodes[i].font={'color':'black'};
			}else if(zNodes[i].rankType=='LEVEL_MANAGEMENT'){
				zNodes[i].font={'color':'red'};
			}
			
			zNodes[i].realName=zNodes[i].name;
			if(zNodes[i].titleWithinTheProject!='' && zNodes[i].titleWithinTheProject!=null){
				zNodes[i].name=zNodes[i].name+"-"+zNodes[i].titleWithinTheProject;
			}
			
			
		}
		
		
		var originalTreeJsonData=new Array();
		
		var rootNode;
		$(document).ready(function(){
			for(var i=0;i<zNodes.length;i++){
				if(zNodes[i].pId==0){
					rootNode=zNodes[i];
				}
			}
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#callbackTrigger").bind("change", {}, setTrigger);
			
		});
		
		function transformTreeOriginal(){
			$.fn.zTree.init($("#treeDemo"), setting, null);
			//alert(debug(originalTreeJsonData));
			$.fn.zTree.init($("#treeDemo"), setting, originalTreeJsonData);
		}
		
		function buildOriginalTreeJsonData(){
			
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var leftCopyTreeNodes = treeObj.transformToArray(treeObj.getNodes());
			originalTreeJsonData=new Array();
			var lastLevel=0;
			for(var i=0;i<leftCopyTreeNodes.length;i++){
				if(leftCopyTreeNodes[i].level>lastLevel){
					lastLevel=leftCopyTreeNodes[i].level;
				}
				
				var json={id:leftCopyTreeNodes[i].id, 
						   pId:leftCopyTreeNodes[i].pId, 
						   name:leftCopyTreeNodes[i].name,
						   rankType:leftCopyTreeNodes[i].rankType,
						   font:leftCopyTreeNodes[i].font};
				if(leftCopyTreeNodes[i].pId==null || leftCopyTreeNodes[i].isParent){
					json.open=true;	
				}
				originalTreeJsonData.push(json);
			}
		}
		
		var currentType="all";
		function transformTreeByRankType(rankType){
			if(rankType=='all'){
				transformTreeOriginal();
				buildOriginalTreeJsonData();
				currentType=rankType;
				$('#modifyBtn').show();
				return;
			}
			$('#modifyBtn').hide();
			if(currentType=='all'){
				buildOriginalTreeJsonData();
			}
			
			if(originalTreeJsonData.length<1 || currentType=='all'){
				buildOriginalTreeJsonData();
			}
			
			$.fn.zTree.init($("#treeDemo"), newTreeSetting, originalTreeJsonData);
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var newTreeJsonData = new Array();
			var nodes =treeObj.getNodes();
			buildNewTreeJsonData(rankType,nodes[0].id,nodes[0].id,newTreeJsonData,treeObj);
			$.fn.zTree.init($("#treeDemo"), newTreeSetting, newTreeJsonData);
			
			currentType=rankType;
		}
		
		function buildNewTreeJsonData(rankType,pid,id,newTreeJsonData,treeObj){
			var treeNode=treeObj.getNodeByParam("id",id, null);
			var id=treeNode.id;
			var name=treeNode.name;
			
			if(treeNode.getParentNode()==null){
				newTreeJsonData.push({id:id,pId:0,name:name,open:true});
				pid=id;
			}else if(treeNode.rankType==rankType){
				newTreeJsonData.push({id:id,pId:pid,name:name,open:true});
				pid=id;
			}
			
			if(treeNode.isParent){
				var nodes=treeNode.children;
				for(var i=0;i<nodes.length;i++){
					buildNewTreeJsonData(rankType,pid,nodes[i].id,newTreeJsonData,treeObj);
				}
			}else{
				return;
			}
		}
		
		
		//-->
	</SCRIPT>
	
	
	
	<table class="globalText" width="100%">
		<tr>
			<td width="45%">
				<div style="width: 340px" class="content_wrap">
					<div class="zTreeDemoBackground left">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
					<div>
						<br>
						<input onclick="javascript:showRadioTree('<c:url value="/json/findAllOrgnizations.html"/>',this.id,addSetting,orgJsonHandler);" id="addEmpBtn" type="button" class="btnStyle" value="+添加人员 ">
					</div>
				</div>
				<div style="margin-top: 5px;">
					
					
					<select onchange="transformTreeByRankType(this.value)" id="rankType">
						<option value="all">所有人员</option>
						<option value="LEVEL_EXECUTION" >执行层</option>
						<option value="LEVEL_MANAGEMENT">管理层</option>
					</select>
					
					<input id="modifyBtn" onclick="javascript:onTreeSubmit();" style="margin-left: 10px;" type="button" class="btnStyle" value=" 修改  ">
				</div>
			</td>
		</tr>
	</table>
<div id="dialog-form" class="globalText" style="display: none;">
	<!-- 
	<p>
		管辖区域：<input id="projectCode" type="text" class="txtbox" size="20" name="" value=""/>
	</p>
	 -->
	<div align="center" style="margin-top: 10px;">
		项目岗位：<input id="titleWithinTheProject_" type="text" class="txtbox" size="20"  value=""/>
	</div>
	<div align="center" style="margin-top: 10px; margin-left: -55px;">
		类别：
		<select id="rankType">
			<option id="LEVEL_EXECUTION" value="LEVEL_EXECUTION">执行层</option>
			<option id="LEVEL_MANAGEMENT" value="LEVEL_MANAGEMENT">管理层</option>
		</select>
	</div>
	<div align="center" style="margin-top: 10px;">
		<input id="formBtn" treeNodeId="" type="button" class="btnStyle" value=" 修改人员信息 ">
	</div>
</div>


<form id="orgForm" target="tempFrame" method="post" action="editProjectOrg.html">
	<input type="hidden" id="jsonData" value="" name="jsonData" />
	<input type="hidden" name="projectId" value="${projectId}" />
</form>

<script>
function submitCallbackSuccess(data){
	tabClick($("#orgTab"));
}
</script>
